<template>
	<div class="Individual_Center">
		<Header></Header>
		<div class="content">
			<div class="user-cnt">
				<div class='user-info-cnt'>
					<!--
						描述：small personal information card
					-->
					<img class="head-portrait" alt="this is your head portrait." src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
					<p><span>关注 23 </span><span>关注者 32 </span></p>
				</div>
				<div class="user-menu-cnt" >
					<!--描述：personal options tabs-->
					
						<div class="item-menu" v-for="info in tab1"	 
						v-on:click="chooseCards(info.id)" 
						v-bind:style="info.bg">
						{{info.txt}}
						
						</div>	
					
					
				</div>
			</div>
			<div class="main-cnt">
				<div v-if="show_id === 0">
					<div class="top-cnt" style="width: 100%;">
						<div class="title-cnt">
							<h4 class="h4-type">我的模拟交易</h4>
							<a class="more-link" href="#">查看更多</a>
						</div>
						<div class="info-cnt">
							<p>模拟交易的数据与实时数据同步，您可以通过模拟交易检验策略的有效性。奇点支持股票、期货的日级、分钟级模拟交易。</p>
							<!--button v-on:click="skipToMakeNew">去新建</button-->
							<div style="margin-left: 45%;">
								<el-button type="primary" plain @click="$router.push({path:'#'})">去新建</el-button>	
							</div>
						</div>
					</div>
					
					
					<div class="top-cnt" style="width: 49%;">
						<div class="title-cnt">
							<h4 class="h4-type">我的策略</h4>
							<a class="more-link" href="#">查看更多</a>
						</div>
						<div class="info-cnt">
							<table class="table-cnt">
								<tr class="table-row">
									<th class="table-head-td"><span>名称</span></th>
									<th class="table-head-td"><span>历史编译运行</span></th>
									<th class="table-head-td"><span>历史回测</span></th>
								</tr>
								<tr v-for="info in code" 
									class="table-row"
									>
									<td	 align="center"><a v-bind:href="info.src" >{{info.name}}</a></td>
									<td	 align="center">{{info.run}}</td>
									<td	 align="center"><span>{{info.test}}</span></td>
								</tr>
							</table>
						</div>
					</div>
					
					<div class="top-cnt" style="width: 49%;margin-left: 2%;">
						<div class="title-cnt">
							<h4 class="h4-type">我的研究文件</h4>
							<a class="more-link" href="#">查看更多</a>
						</div>
						<div class="info-cnt">
							<table class="table-cnt">
								<tr class="table-row">
									<th class="table-head-td"><span>名称</span></th>
									<th class="table-head-td"><span>最后修改日期</span></th>
								</tr>
								<tr v-for="info in my_file" 
									class="table-row"
									>
									<td	 align="center"><a v-bind:href="info.src" >{{info.name}}</a></td>
									<td	 align="center">{{info.date}}</td>
								</tr>
							</table>
						</div>
					</div>
					
					<!-- <div class="top-cnt" style="width: 100%;">
						<div class="title-cnt">
							<h4 class="h4-type">策略精选</h4>
							<a class="more-link" href="#">查看更多</a>
						</div>
						<div class="flex-container">
							<Strategy_Card style="margin-left: 5%;"></Strategy_Card>
							<Strategy_Card style="margin-left: 5%;"></Strategy_Card>
						</div>
					</div> -->
					
					<div class="top-cnt" style="width: 59%;">
						<div class="title-cnt">
							<h4 class="h4-type">社区精选</h4>
							<a class="more-link" href="#">查看更多</a>
						</div>
						<div class="info-cnt">
							<div class="com-cnt" 
								v-for="fn in com_file">
								 <a class="name-cnt" v-bind:href="fn.src">
									{{fn.name}}	 &nbsp;	 
								</a>
								<span style="color: cadetblue;">★</span>
								<span>{{fn.cares}}&nbsp;&nbsp;</span>
								<span style="color: cadetblue;">✉</span>
								<span>{{fn.files}}</span>
								<span class="right">{{fn.auth}}</span>
							</div>
						</div>
					</div>
					<div class="top-cnt" style="width: 39%;margin-left: 2%;">
						<div class="title-cnt">
							<h4 class="h4-type">推荐关注</h4>
							<a class="more-link" href="#">换一换</a>
						</div>
						<div class="info-cnt">
							<div class="flex-container" style="margin-top: 2.5%;height: 60px;"
								v-for="fn in fans">
								<div class="pic-cnt">
									<img v-bind:src="fn.src" alt="yout portrait" width="40" height="40">
								</div>
								<div class="name-cnt">
									<a href="#">{{fn.name}}</a>
									<p>{{fn.files}} 篇文章 | {{fn.cares}} 人关注</p>
								</div>
								<div class="btn">
									<button class="btn-fans">+关注</button>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div v-else-if="show_id ===1">
					<Wallet_Card></Wallet_Card>
				</div>
				<div v-else-if="show_id === 2">
					<Point_Card></Point_Card>
				</div>
				<div v-else-if="show_id === 3">
					<Single_Card title="我的收藏" content="暂无数据">
					</Single_Card>
				</div>
				<div v-else-if="show_id === 4 || show_id === 5">
					<Theme_Card
						></Theme_Card>
				</div>
				<div v-else-if="show_id === 6">
					<Single_Card title="订购历史" content="暂无数据">
					</Single_Card>
				</div>
				<div v-else-if="show_id === 7">
					<Multiple_Card :titles="rings">
					</Multiple_Card>
				</div>
				<div v-else>
                            <!--
                            	作者：offline
                            	时间：2019-08-08
                            	描述：:titles="['个人资料','账户安全','交易账户','消息推送']"
                            -->
					<Multiple_Card :titles="accounts"
					>
					</Multiple_Card>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import Header from '@/components/Header.vue'
import Strategy_Card from '@/components/cards/Strategy_Card.vue'
import Wallet_Card from '@/components/cards/Wallet_Card'
import Point_Card from '@/components/cards/Point_Card'
import Theme_Card from '@/components/cards/Theme_Card'
import Single_Card from '@/components/cards/Single_Card'
import Multiple_Card from '@/components/cards/Multiple_Card'
export default {
	name: 'Individual_Center',
	data(){
	return{
		tab1:[
			{txt:"我的主页",id:0,bg:"background-color: aliceblue;"},
			{txt:"我的钱包",id:1,bg:"aliceblue"},
			{txt:"我的积分",id:2,bg:"aliceblue"},
			{txt:"我的收藏",id:3,bg:"aliceblue"},
			{txt:"我的主题",id:4,bg:"aliceblue"},
			{txt:"我的回复",id:5,bg:"aliceblue"},
			{txt:"策略商城",id:6,bg:"aliceblue"},
			{txt:"策略擂台",id:7,bg:"aliceblue"},
			{txt:"账号设置",id:8,bg:"aliceblue"},
		],
		show_id:0,
		
		links:[
			'#','#','#','#',
			//分别是模拟交易，策略列表，研究文件，策略卡片的连接
			
		],
		code:[
			{src:"/Shop_Detail",name:"Dual_Thrust策略—股指期货",run:1,test:5},
			{src:"/Shop_Detail",name:"海龟交易法",run:0,test:0},
			{src:"/Shop_Detail",name:"次新择时拉升",run:0,test:0},
			{src:"/Shop_Detail",name:"期货截面动量模型",run:0,test:0},
			{src:"/Shop_Detail",name:"宏观基本面选股",run:0,test:0},
		],
		my_file:[
			{src:"/instruction",name:"新手教程——收益率及其计算",date:"2019-8-2"},
			{src:"/instruction",name:"新手教程——第二课",date:"2019-8-2"},
			{src:"/instruction",name:"新手教程——第三课",date:"2019-8-2"},
			{src:"/instruction",name:"新手教程——第四课",date:"2019-8-2"},
			{src:"/instruction",name:"新手教程——第五课",date:"2019-8-2"},
		],
		com_file:[
			{src:"/community",name:"精英任务获奖作品",files:120,cares:150,auth:"奇点金融"},
			{src:"/community",name:"简单阿尔法策略：量化选股 + 做空300etf（代替IF）",files:120,cares:150,auth:"奇点金融"},
			{src:"/community",name:"【API解析】避免未来数据",files:120,cares:150,auth:"奇点金融"},
			{src:"/community",name:"Barra模型初探，A股市场风格解析",files:120,cares:150,auth:"奇点金融"},
			{src:"/community",name:"Xgboost 50ETF 2.0 分钟级回测",files:120,cares:150,auth:"奇点金融"},
		],
		fans:[
			{src:"https://atts.w3cschool.cn/attachments/avatar2/avatar_0.jpg",name:"小兔子",files:50,cares:38},
			{src:"https://atts.w3cschool.cn/attachments/avatar2/avatar_0.jpg",name:"维尼",files:0,cares:0},
			{src:"https://atts.w3cschool.cn/attachments/avatar2/avatar_0.jpg",name:"奇诺比奥",files:0,cares:0},
			{src:"https://atts.w3cschool.cn/attachments/avatar2/avatar_0.jpg",name:"路易",files:0,cares:0},
		],
		//策略擂台数据导入
		rings:[
			{name:"订阅的策略",id:0},
			{name:'分享的策略',id:1},
		],
		//账号设置
		accounts:[
			{name:'个人资料',id:0},
			{name:'账户安全',id:1},
			{name:'交易账户',id:2},
			{name:'消息推送',id:3},
		]
	}
},
	mounted() {
	
	},
	methods: {
		chooseCards(num){
			//alert(num)
			var t=this.show_id;
			this.show_id=num;
			this.tab1[t].bg="background-color: #fff;"
			this.tab1[num].bg="background-color: aliceblue;";
			
		},
		skipToMakeNew(){
			
		}
	},
	components: {
		Header,
		Strategy_Card,
		Wallet_Card,
		Point_Card,
		Theme_Card,
		Single_Card,
		Multiple_Card,
	}
}

</script>



<style scoped>
	@import url("../libs/css/individual.css");
</style>
